<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <GraphicalDataFlow/>
            </n-icon>
            <Handle id="ConvertDataType-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="ConvertDataType-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>转换数据类型</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
<!--            转换数据类型之日期 -- (封印状态)-->
<!--            <n-card title="转换数据类型-日期">-->
<!--                <n-select-->
<!--                    v-model:value="operation.change_type_column"-->
<!--                    :options="props.data.data.title"-->
<!--                    @update:value="popup.reopen"-->
<!--                    value-field="key"-->
<!--                    label-field="title"-->
<!--                    placeholder="请选择转换的列"-->
<!--                />-->
<!--                <n-input-->
<!--                    v-model:value="operation.change_type_dateType.years"-->
<!--                    clearable-->
<!--                    placeholder="请输入新日期的年单位"-->
<!--                />-->
<!--                <n-input-->
<!--                    v-model:value="operation.change_type_dateType.months"-->
<!--                    clearable-->
<!--                    placeholder="请输入新日期的月单位"-->
<!--                />-->
<!--                <n-input-->
<!--                    v-model:value="operation.change_type_dateType.day"-->
<!--                    clearable-->
<!--                    placeholder="请输入新日期的日单位"-->
<!--                />-->
<!--                <n-button @click="operation.change_type">转换日期格式</n-button>-->
<!--            </n-card>-->
            <n-card title="转换数据类型">
                <p>选择所需转换的字段列: </p>
                <n-select
                    v-model:value="field"
                    :options="props.data.data.title"
                    @update:value="popup.reopen"
                    multiple
                    placeholder="请选择所要清洗的字段列"
                    label-field="title"
                    value-field="key"
                />
                <br>
                <p>数据转换类型: </p>
                <n-select
                    v-model:value="dataType"
                    :options="dataTypeArray"
                    @update:value="popup.reopen"
                    placeholder="请选择所要清洗的内容"
                />
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="conversion">转换</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>
import {GraphicalDataFlow} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";

const elements = useElementsStore()
const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data', 'id'])
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            console.log(22)
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})
// 获取上级节点数据
const getSuperiorData = () => {
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}
const field = ref([])
const dataTypeArray = [
    {label:"整数",value:"int"},
    {label:"浮点数",value:"float"},
    {label:"日期",value:"date"},
    {label:"文本",value:"str"},
]
const dataType = ref(dataTypeArray[0].value)
/**
 * 转换数据类型
 */
const conversion = ()=>{
    workApi.post("perform_tasks/change_type",{
        data:props.data.data,
        operation: {
            row: {serial_number: []},
            column: {
                serial_number: field.value,
                new_type:dataType.value
            }
        }
    }).then(r=>{
        props.data.data = r.data
    })
}

// 操作
const operation = reactive({
    change_type_column: null,
    change_type_dateType: {
        years: null,
        months: null,
        day: null,
    },
    change_type() {
        workApi.post("perform_tasks/change_type", {
            data: props.data.data,
            operation: {
                column: {
                    serial_number: [operation.change_type_column],
                    new_format: '' +
                        '%Y' + operation.change_type_dateType.years + '' +
                        '%m' + operation.change_type_dateType.months + '' +
                        '%d' + operation.change_type_dateType.day
                }
            }
        }).then(r=>{
            props.data.data = r.data
        })
    }
})


</script>

<style scoped lang="less">
.n-card {
    width: 500px;
}
</style>